<template>
    <div class="searchResult">
        <div class="wrap">
            <h5>Search results for "{{ keyWords }}" </h5>
            <article class="articleList" v-for="item in searchResultList" :key="index">
                <h3>
                    <router-link :to="{path:`/detail/${item.classfy}/${item.newsTitle}/${item.id}`}">
                        {{ item.newsTitle }}
                    </router-link>
                </h3>
                <p>
                  {{ item.seoText }}  
                </p>
            </article>
        </div>
    </div>
</template>



<script setup>
import { ref, toRef,onMounted} from 'vue'
import { articleData } from '@/utils/common.js'
import { useRoute, useRouter} from 'vue-router'

const route = useRoute()
let keyWords = toRef(location.href.split('search/')[1])


let searchResultList = []
for(let i in articleData){
    for(let j in articleData[i]){
        for(let m in articleData[i][j]){
            if(m !== 'id'){
                if(articleData[i][j][m].includes(keyWords.value)){
                    searchResultList.push(articleData[i][j])
                }
            }
        }
    }

}

</script>

<style lang="scss">
$border-color1:#e2e2e2;
$primaryColor:#f9ab00;
.wrap{
    width: 900px;
        .searchBox{
            width: 120px !important;
            input{
                width: 100%;
            }
    }
}
.searchResult{
    h5{
        margin: 20px 50px;
    }
    .articleList{
        margin: 0 50px;
        border-bottom: 1px solid $border-color1;
        h3{
            margin-top: 5px;
            a{
                color: #161616;
                &:hover{
                color: $primaryColor;
            }
            }
         
        }
        p{
            color: #686868;
            margin: 20px 0;
        }
    }
}
</style>